<template>
  <div>
     <h1>聊天室</h1>
     <div style="display:flex;">
      
        <ul class="peoplelist">
           <h1>在线列表</h1>
          <li v-for="(item,index) in clientList" :key="index">{{item}}</li>
        </ul>
     <div class="chatroom">
     <div class="title">
          <span>进思聊天室 </span>
          <span>在线人数 （{{count}}人） </span>
     </div>
     <div class="content">
          <div class="msglist">
            <!-- 通过数据的item.isMe 判断是否加载isMe的class 加载自己的消息样式 -->
            <div :class="['msgone',item.isMe=='true'?'isMe':'']" v-for="(item,index) in messageList" :key="index">
              <div v-if="!item._type">
                  <!-- 昵称 -->
                <span class="nickname_info">
                  <span v-if="item.isMe=='true'">: </span>
                  {{item.nickname}} 
                    <span v-if="item.isMe==false">: </span>
                  </span>
                      <!-- 消息内容-->
                <span class="msg_info">{{item.msg}}</span>
              </div>
              <!-- 通过item._type判断是不是加入和离开的消息 -->
              <div class="tips" v-if="item  ._type">
                <p>{{item.nickname}} {{item._type==1?'加入':'离开'}} 了群聊</p>
              </div>
            </div>
          
          
          </div>
     </div>
     <div class="msg_wrap">
      昵称:<input v-model="nickname" type="text" placeholder="你的昵称">
      内容：<input v-model="msg" type="text"  placeholder="你想说的话"></input>
      <div @click="sendMsg">发送</div>
     </div>
   </div>
   </div>
  </div>
</template>
<script>
// websocket 双工通讯协议也长连接 和http协议不同
// websocket 和后台连接，连接成功后，后台会主动推送消息给前端
// websocket 可以解决跨域问题
// websocket 和http协议一样，都是基于TCP协议的
// webscoket 应用场景 聊天室，客服模块，消息推送，实时数据，在线游戏
export default {
    data(){
      return {
        wss:"",//全局存储websocket对象
        messageList:[],//聊天的列表的数据
        clientList:[],//在线好友列表
        count:0,//在线的总人数
        nickname:"",//昵称
        msg:""//聊天内容
      }
    },
    created(){
      // 创建websocket对象
      this.wss=new WebSocket('ws://8.137.35.74:8080');
     
   
    },
    mounted(){
       this.wss.onopen=function(){ //监听是否连接到后台事件
         console.log("连接成功 ")
      }
      // onmessage 监听数据返回的
  
      this.wss.onmessage=(e)=>{
        
        console.log(e.data,"后台返回的数据")
        let res=JSON.parse(e.data);
        console.log(res,"-=-------")
        if(res.type=="count"){
          this.count=res.count; //存储好在线人数
          this.clientList=res.clients;//在线好友列表
          this.messageList.push(res)//将统计数据也放到的了聊天数据
          // [
          //   {isMe:"true"，nickename:"老王" ,msg:"你好"},
          //   {isMe:false, nickename:"孙悟空",msg:"大家好，我是孙悟空"},
          //   {nickename:"小王",_type:1}
          // ]
        }
        // 加入后台返回的数据的type为msg 是消息
        if(res.type=="msg"){
            this.messageList.push(res)
            console.log( this.messageList,"---消息列表")
        }
      
      }
    },
    computed:{
     
     
    },
    methods:{
      sendMsg(){ //给后台发送聊天数据
        let data=JSON.stringify({
          nickname:this.nickname, //昵称
          msg:this.msg  //内容
        })
        // 消息和昵称不能为空
        if(this.nickname!=""&&this.msg!=""){
           this.wss.send(data) //发送给后台数据
           this.msg=""//清空聊天输入框
        }else{
          alert("昵称和内容不能为空")
        }
   
      
      }
    }
}
</script>
<style lang="scss">
    .peoplelist{
      width: 200px;
      list-style: none;
      li{
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-top: 10px;
        background: #ccc;
        color: green;
      }
    }
    .chatroom{
      width: 800px;
      margin-left: 40px;
      .title{
        height: 60px;
        background: skyblue;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:30px;
      }
      .content{
        height: 500px;
        background: pink;
        overflow-y:scroll ;
      }
      .msg_wrap{
        display: flex;
          height: 50px;
          align-items: center;
          margin-top: 20px;
        input:nth-child(1){
          width: 200px;
            height: 50px;
        }
        input:nth-child(2){
          width: 350px;
            height: 50px;
        }
        div{
          width: 130px;
          height: 58px;
          text-align: center;
          line-height: 53px;
          color:white;
          background: green;
        }

      }
    }
    .msgone{
      height: 40px;
      line-height: 40px;
      margin-left: 20px;
      margin-top: 5px;
      &.isMe>div{
        display: flex;
        justify-content: flex-start;
        flex-direction: row-reverse;
      }
      .nickname_info{
        color:red;
      }
      .msg_info{
        color:white;
        background: green;
        padding: 10px;
      }
    }
    .tips{
      height: 20px;
      line-height: 20px;
      margin-top: 5px;
      margin-bottom:5px;
      text-align: center;
      color: red;
    }
</style>